<template>
  <div>
    <h1>商品列表</h1>
    <h1>渲染下分类id==={{ $route.query.id }}</h1>
    <hr/>
    <ul>
      

      <li @click="goDetail(item)" class="goods" v-for="item in goodsList" :key="item.id">
      <p>商品名称：{{item.name}}</p>
      <p>商品价格：{{item.price}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsList:[
        {
          id:1,
          name:'华为遥遥领先',
          price:999
        },
        {
          id:2,
          name:'iphone 15 Pro Max',
          price:8999
        },
        {
          id:3,
          name:'OPPO real13',
          price:3877
        },     {
          id:4,
          name:'小米 保时米',
          price:1999
        }
      ]
    };
  },
  mounted() {
    //在这里调用接口 通过不同的id查找不同的商品列表
  },
  methods:{
    goDetail(item){
      console.log(item,'对象')
      this.$router.push(`/datail?datail=${JSON.stringify(item)}`)
    }
  }
};
</script>

<style scoped>
.goods{
  padding: 5px 10px;
    width: 85%;
    border: 1px solid #ccc;
    margin: 10px auto;
    border-radius: 10px;
}
</style>
